import * as React from 'react';
import './jsx.scss';
class Jxs extends React.Component{
     render() {
        return (
            <div className="c-react-home-wrap">
                <h2 onClick={()=>{
                    window.location.href='http://10.15.198.18:8090/pages/viewpage.action?pageId=3932983#id-%E3%80%90%E5%88%86%E4%BA%AB%E4%BC%9A1811%E3%80%9109-react%E8%84%9A%E6%89%8B%E6%9E%B6---create-reate-app-5%E3%80%81JSX%E4%BB%8B%E7%BB%8D'
                }}>JSX 介绍</h2>
                <h4 className="title">变量的声明：const element = {'<h1>Hello, world!</h1>'};</h4>
                <p>这种有趣的标签语法既不是字符串也不是HTML。这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有 JavaScrip 的全部能力。</p>
                <p>有别于以往的语法，react采用了新的标签语法jsx。</p>
                <ul>
                    <li>
                        <h4 className="list-title">html5的标签语法：</h4>
                        <img src={require('$img/react/jsx-html.png')} alt=""/>
                    </li>
                    <li>
                        <h4 className="list-title">vue 采用vue的文件</h4>
                        <img src={require('$img/react/jsx-vue.png')} alt=""/>
                    </li>
                    <li>
                        <h4 className="list-title">react采用jsx的文件</h4>
                        <img src={require('$img/react/jsx-react.png')} alt=""/>
                    </li>
                </ul>
                
            </div>
        );
    }
}

export default Jxs;
